<template>
    <div id="rs-featured-courses" class="rs-featured-courses pt-100 pb-100 md-pt-50 md-pb-50">
        <div class="container-fluid">
            <div class="sec-title6 text-center mb-60 xs-mb-40">
                <!-- <div class="img-part"><img src="https://www.wfls.com.cn/assets/images/honor_title.png" alt=""></div> -->
            </div>
            <div class="rs-carousel owl-carousel owl-loaded owl-drag">
                <div class="owl-stage-outer">
                    <swiper :breakpoints="breakpoints" :modules="modules" class="owl-stage" :slides-per-view="6"
                        :space-between="30" :autoplay="{ delay: 4000, disableOnInteraction: false }" :navigation="{
                            nextEl: '.owl-prev',
                            prevEl: '.owl-next',
                        }" :loop="true" >
                        <swiper-slide class="owl-item cloned" v-for="(item, index) in items" @swiper="binSwiper">
                            <div class="courses-item  courses-item-odd">
                                <div class="img-part"  :style="{background: getColor(index)}">
                                    <a href="#" class="image-popup">
                                        <div class="item-box" v-for="(cItem, i) in item.list" :key="i" >
                                            <div class="item-left"><img :src="cItem.cover" alt="" srcset=""></div>
                                            <div class="item-right">
                                                <div class="item-time" :style="{color: getColor1(index)}">{{ cItem.content }}</div>
                                                <div class="item-text text-clamp " :style="{color: getColor1(index)}">{{ cItem.title }}</div>
                                             </div>
                                        </div>
                                    </a>
                                </div>
                                <div class="content-part">
                                    <span><a href="#" class="categories bg1">{{ item.category }}</a></span>
                                </div>
                            </div>

                        </swiper-slide>
                    </swiper>
                </div>
                <div class="owl-nav">
                    <div class="owl-prev"><i class="fa fa-angle-left"></i></div>
                    <div class="owl-next"><i class="fa fa-angle-right"></i></div>
                </div>
            </div>
        </div>

    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { Autoplay, Navigation } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/vue';
import {getCultureList} from '@/api/api.js'
import {  history1,
    history2,
    history3,
    history4,
    history5,
    history6,
    history7,
    history8} from '@/assets/images/history'
import 'swiper/css';
const onSwiper = (swiper) => {
    console.log(swiper);
};
const onSlideChange = () => {
    console.log('slide change');
};
const mySwiperRef = ref(null)
const mySwiper = ref([]);
const binSwiper = (swiper) => {
    mySwiper.value = swiper
    console.log(swiper);
    console.log(mySwiperRef.value);
}
const getColor = (index)=>{
    index = index % 2
    if(index == 0){
        return '#eea522'
    }else{
        return '#244c7f'
    }
}
const getColor1 = (index)=>{
    index = index % 2
    if(index == 0){
        return '#486666'
    }else{
        return '#fff'
    }
}
const items = ref([
   
    // 更多项...
]);
const modules = [Autoplay, Navigation]
const breakpoints = {
    0: {
        slidesPerView: 1,
        spaceBetween: 20,
    },
    // 当屏幕宽度大于等于 640px 时
    640: {
        slidesPerView: 2,
        spaceBetween: 20,
    },
    // 当屏幕宽度大于等于 1024px 时
    1024: {
        slidesPerView: 3,
        spaceBetween: 30,
    },
    // 当屏幕宽度大于等于 1280px 时
    1280: {
        slidesPerView: 6,
        spaceBetween: 30,
    },
};
onMounted(()=>{
    getCultureList('xlszl','yzzc', true ).then((res) => {
        const grouped = res.data.reduce((acc, item) => {
            if (!acc.some(group => group.category === item.content)) {
                acc.push({
                category: item.content,
                list: res.data.filter(i => i.content === item.content)
                });
            }
            return acc;
            }, []);

            items.value = grouped;
    })
})

// 其他逻辑...
</script>
<style scoped lang="scss">
.img-part {
    width: 100%;
    min-height: 405px;
    text-align: center;
    display: block;
    border-radius: 3px;
    overflow: hidden;
}
.item-box{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 10px;
    // background-color: #eea522;
    .item-left{
        min-width: 50%;
        margin-right: 10px;
        img{
            width: 155px;
            height: 105px;
            object-fit: cover;
        }
    }
    .item-right{
        min-width: calc(50% - 10px);
        margin-right: 10px;
    }
    .item-time{
        text-align: left;
        color: #486666;
        font-size: 16px;
        font-weight: bold;
    }
    .item-text{
        color: #486666;
        font-size: 12px;
        text-align: left;
        font-weight: bold;
    }
    .text-clamp {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}
</style>
